<template>
	<!--填写报名信息组件-->
	<div :class="['pop-up',isPoScreen?'pop-up-poscreen':'']">
	  <div class="header-box">
          <span>{{ isNextStep?'实名举报':'举报内容'}}</span>
          <i class="close" @click="close"></i>
      </div>
      <div v-if="!isNextStep" class="main-box">
          <div class="checkbox-item">
              <h3>内容违规</h3>
              <van-checkbox-group v-model="resultOne"  direction="horizontal">
                <van-checkbox :name="item.name" v-for="item in contentViolation" :key="item.name" :icon-size='15'>{{item.name}}</van-checkbox>
             </van-checkbox-group>
          </div>
          <div class="checkbox-item">
              <h3>其它违规</h3>
              <van-checkbox-group v-model="resultTwo"  direction="horizontal">
                <van-checkbox :name="item.name" v-for="item in othersViolation" :key="item.name" :icon-size='15'>{{item.name}}</van-checkbox>
             </van-checkbox-group>
             <textarea v-if="resultTwo.includes('其它')" v-model="content" class="violation-box"  placeholder="请输入直播中违规的内容…"></textarea>
          </div>
          <div class="bottom-box">
              <p  :class="['next-step',isDisable?'next-step-disable':'']" @click="nextStep">提交</p>
          </div>
      </div>
<!--      <div v-else class="main-input-box">
          <p class="input-item">
              <span>姓名</span>
              <input v-model="name" type="text" placeholder="请输入您的真实姓名">
          </p>
          <p class="input-item">
              <span>手机</span>
              <input v-model="telNum" type="text" placeholder="请输入您的11位手机号">
          </p>
          <div class="bottom-box">
              <p  :class="['next-step',isDisable?'next-step-disable':'']" @click="submit">提交</p>
          </div>
      </div> -->
	</div>
</template>

<script>
	export default {
		props: {	
            isPoScreen:{
                type:Boolean,
                default:false
            }		
		},
		data() {
			return {
                resultOne:[],//选中
                resultTwo:[],
                contentViolation:[{name:"低俗色情"},{name:"垃圾广告"},{name:"暴力恐怖"},
                                  {name:"违法违规"},{name:"引诱欺诈"},{name:"搬运作品"}],//内容违规
                othersViolation:[{name:"侵权"},{name:"其它"}],//其它违规
                content:'',//违规内容
                isDisable:true,
                isNextStep:false,
                name:'',
                telNum:''
               
			}
		},
		created() {
          
	
		},
		mounted(){
		},
		methods: {
            nextStep(){				
                // if(this.isDisable) return;
                //  this.isNextStep = true;
                //  this.isDisable = true;
				//console.log(this.resultOne)
				if(this.resultOne.length||this.resultTwo.length){
					fun.toastMessage('举报成功');
					this.close()
				}				
            },
            submit(){
                if(this.isDisable) return;
                const reg = /^1[0-9]{10}$/;
                if (!reg.test(this.telNum)) {
                     fun.toastMessage('请填入正确的手机号码')
                     return
                }
                fun.toastMessage('举报成功');
                this.close()
            },
            close(){//关闭举报
                this.$emit('formChildMsg', {type: 'closeReportPop',data: {'Msg': '关闭举报'}})
            }
			
		},
        watch:{
            resultOne(val){
                if(val.length > 0){
                    if(this.resultTwo.length>0){
                         if(this.resultTwo.includes('其它')){
                               this.isDisable  = this.content ? false :true 
                         }else{
                             this.isDisable = false
                         }
                    }else{
                        this.isDisable = false
                    }
                }else{
                    if(this.resultTwo.length>0){
                        if(this.resultTwo.includes('其它')){
                          this.isDisable  = this.content ? false :true           
                        }else{
                            this.isDisable  = false
                        }
                    }else{
                        this.isDisable = true
                    }
                    
                }

            },
            resultTwo(val){
                if(val.length>0){
                    if(this.resultOne.length>0 ){
                        if(!val.includes('其它')){
                            this.isDisable = false
                        }else{
                            this.isDisable = this.content ? false :true
                        }   
                    }else{
                       if(val.includes('其它')){
                           this.isDisable = this.content ? false :true
                       }else{
                           this.isDisable =false
                       }  
                    }

                }else{
                    this.isDisable  = this.resultOne.length>0 ? false :true
                }
            },
            content(val){//违规内容
                 if(val){
                     this.isDisable = false
                    }else{
                     this.isDisable = true
                    }
            },
            name(val){
                if(val){
                    if(this.telNum.length == 11){
                        this.isDisable = false
                    }else{
                        this.isDisable = true
                    }
                }else{
                    this.isDisable = true
                }
            },
            telNum(val){
                if(val){
                    if(this.name){
                        if(val.length == 11){
                           this.isDisable = false
                        }else{
                            this.isDisable = true
                        }
                    }else{
                      this.isDisable = true  
                    }
                    
                }
            }


        }
	}
</script>

<style scoped="scoped">
 .pop-up {
    width: 100%;
    padding: 34px 24px 80px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    bottom: 0px;
    z-index: 1501;
    border-radius: 20px 20px 0px 0px;
  }
  .header-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
  }
  .header-box span{
      font-size: 36px;
      font-weight: 500;
      color: #333333;
  }
  .header-box::before{
      content: '';
      height: 48px;
      width: 48px;
  }
  .header-box .close{
      height: 48px;
      width: 48px;
      background: url('../assets/images/report_close.png') no-repeat;
      background-size: 100% 100%;
  }
  .checkbox-item{
      margin-bottom: 15px;
  }
  .checkbox-item h3{
      margin-bottom: 10px;
      font-size: 30px;
      font-weight: 500;
      color: #333333;
  }
  .checkbox-item /deep/ .van-checkbox-group{
      padding: 20px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      
  }
  .checkbox-item /deep/ .van-checkbox{
      width: 31%;
      margin-bottom: 15px;
  }
  .checkbox-item /deep/ .van-checkbox__label{
      margin-left: 14px;
      font-size: 28px;
      color: #27344B;
      line-height: 40px;
      letter-spacing: 1px;
  }
  .checkbox-item /deep/ .van-checkbox__icon .van-icon{
        color: #EBEBEB;
        background-color: #EBEBEB;
        border-color: #EBEBEB;
  }
  .checkbox-item /deep/ .van-checkbox__icon--checked .van-icon{
        color: #fff;
        background-color: #1989fa;
        border-color: #1989fa;
  }
  .violation-box{
      padding: 10px 14px;
      width: 100%;
      height: 116px;
      border-radius: 6px;
      border: 1px solid #EBEBEB;
  }
  .violation-box::-webkit-input-placeholder {
		font-size: 26px;
        font-weight: 400;
        color: #999999;
	}
    .bottom-box{
        display: flex;
        justify-content: center;
    }
  .next-step{
      padding: 12px 36px;
      background: #1677FF;
      border-radius: 10px;
      font-size: 28px;
      font-weight: 500;
      color: #FFFFFF;
  }
  .next-step-disable{
      background:rgba(22, 119, 255, 0.5)
  }
  .input-item{
      display: flex;
	  flex-direction: row;
	  align-items: center;
  }
  .input-item span{
      width: 168px;
	margin-right: 20px;
	text-align: right;
    font-size: 30px;
	font-weight: 400;
	color: #333333;
	line-height: 42px;
  }
  .input-item span::before{
    content: '*';
    margin-right: 8px;
    font-size: 30px;
    font-weight: 500;
    color: #E8340A;
  }
  .input-item input{
      width: 380px;
	height: 68px;
	margin: 15px 0;  
	padding-left: 16px;
	border-radius: 6px;
	border: 1px solid #EBEBEB;
	line-height: 38px;
  }
  input::-webkit-input-placeholder {
	font-size: 26px;
    font-weight: 400;
    color: #DBDBDB;
	}
 .main-input-box .bottom-box{
     margin-top: 60px;
 }
 /* 竖版样式 */
 .pop-up-poscreen{
     background:#272727;
 }
 .pop-up-poscreen .header-box span,
 .pop-up-poscreen .checkbox-item h3,
 .pop-up-poscreen .checkbox-item /deep/ .van-checkbox__label,
 .pop-up-poscreen .violation-box,
 .pop-up-poscreen .input-item span
 {
    color: #FFFFFF;
 }
  .pop-up-poscreen .checkbox-item /deep/ .van-checkbox__icon .van-icon{
        color: #FFFFFF;
        background-color: #FFFFFF;
        border-color:#FFFFFF;
  }
  .pop-up-poscreen .checkbox-item /deep/ .van-checkbox__icon--checked .van-icon{
        color: #fff;
        background-color: #1989fa;
        border-color: #1989fa;
  }
 .pop-up-poscreen .violation-box{
     background:#272727;
  }
  .pop-up-poscreen .header-box .close{
      background: url('../assets/images/report_close_ps.png') no-repeat;
      background-size: 100% 100%;

  }
 .pop-up-poscreen .input-item input{
    border: 1px solid #ACACAC;
    color: #FFFFFF;
    background:#272727;
  }

</style>
